<template>
	<div class="list">
		<!--头部-->
		<CommonHead :title = "title" :show = "show"></CommonHead>
		<!--爱车车型-->
		<div class="changeCar" style="border-bottom: 2px solid #F6AB00;">
			<p id="selectCar">
				<span>爱车车型</span>
				<i>选择</i>
			</p>
		</div>
		<div class="fff"></div>
		<div class="cates2">
			<div class="lebar f1">
				<ul style="height: 581px;">
					<li class="dqsel" @click="listOne(1360)">
						<h2>
							<img src="../assets/img/cates/1.png"/>
							快修保养
							<label>{{add1}}</label>
						</h2>
						<ul class="tbar" :class="{shows:a}">
							<li v-for="(item,index) in list" :class="{sel: index == checkIndex}" @click.stop="itemList(index)">
								{{item.name}}
							</li>
						</ul>
					</li>
					<li @click="listTwo(1361)">
						<h2>
							<img src="../assets/img/cates/2.png"/>
							汽车用品
							<label>{{add2}}</label>
						</h2>
						<ul class="tbar" :class="{shows:b}">
							<li v-for="(item,index) in list2" :class="{sel: index == checkIndex2}" @click.stop="itemList2(index)">
								{{item.name}}
							</li>
						</ul>
					</li>
					<li @click="listThree(1362)">
						<h2>
							<img src="../assets/img/cates/3.png"/>
							全车配件
							<label>{{add3}}</label>
						</h2>
						<ul class="tbar" :class="{shows:c}">
							<li v-for="(item,index) in list3" :class="{sel: index == checkIndex3}" @click.stop="itemList3(index)">
								{{item.name}}
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="rbar fl">
				<div class="imgban">
					<img src="../assets/img/cates/banner.png"/>
				</div>
				<ul>
					<li v-for="item in rglist">
						<a>{{item.name}}</a>
					</li>
					
				</ul>
			</div>
		</div> 
		<NavBottom></NavBottom>
	</div>
</template>

<script>
	import CommonHead from "./CommonHead.vue"
	import NavBottom from "./NavBottom.vue"
	
	export default{
		data(){
			return{
				title:"",
				show:"",
				list:"",
				list2:"",
				list3:"",
				a:true,
				b:false,
				c:false,
				add1:"-",
				add2:"+",
				add3:"+",
				rglist:"",
				checkIndex:0,
				checkIndex2:0,
				checkIndex3:0,
				sonone:"",
				sontwo:"",
				sonthree:""
			}
		},
		mounted(){
			this.fetchData();
		},
		methods:{
			fetchData(){
				var that = this;
				this.$http.get("src/json/data.json").then(function(res){
					that.title = res.data.commonHead[0].name;
					that.show = res.data.commonHead[0].show;
				});
				this.$http.get("https://www.qpmall.com/getIndexClassificationByfir.htm?parentID=1360").then(function(res){
					that.list = res.data.classifyBarList;
				});
				this.$http.get("https://www.qpmall.com/getIndexClassificationByfir.htm?parentID=1363").then(function(res){
					that.rglist = res.data.classifyBarList;
				});
			},
			listOne(index){
				var that = this;
				this.$http.get("https://www.qpmall.com/getIndexClassificationByfir.htm?parentID="+index).then(function(res){
					that.list = res.data.classifyBarList;
				});
				this.$http.get("https://www.qpmall.com/getIndexClassificationByfir.htm?parentID=1363").then(function(res){
					that.rglist = res.data.classifyBarList;
				});
				
				this.a = true;
				this.b = false;
				this.c = false;
				this.checkIndex = 0;
			},
			listTwo(index){
				var that = this;
				this.$http.get("https://www.qpmall.com/getIndexClassificationByfir.htm?parentID="+index).then(function(res){
					that.list2 = res.data.classifyBarList;
				});
				this.$http.get("https://www.qpmall.com/getIndexClassificationByfir.htm?parentID=1364").then(function(res){
					that.rglist = res.data.classifyBarList;
				});
				
				this.a = false;
				this.b = true;
				this.c = false;
				this.checkIndex2 = 0;
			},
			listThree(index){
				var that = this;
				this.$http.get("https://www.qpmall.com/getIndexClassificationByfir.htm?parentID="+index).then(function(res){
					that.list3 = res.data.classifyBarList;
				});
				this.$http.get("https://www.qpmall.com/getIndexClassificationByfir.htm?parentID=1365").then(function(res){
					that.rglist = res.data.classifyBarList;
				});
				
				this.a = false;
				this.b = false;
				this.c = true;
				this.checkIndex3 = 0;
			},
			itemList(num){
				this.checkIndex = num;
				var that = this;
				switch(num){
					case 0: this.sonone = 1363; break;
					case 1: this.sonone = 1364; break;
					case 2: this.sonone = 1365; break;
					case 3: this.sonone = 1366; break;
					case 4: this.sonone = 1367; break;
					case 5: this.sonone = 1375; break;
					case 6: this.sonone = 1376; break;
					case 7: this.sonone = 1377; break;
				};
				this.$http.get("https://www.qpmall.com/getIndexClassificationByfir.htm?parentID="+this.sonone).then(function(res){
					that.rglist = res.data.classifyBarList;
				});
			},
			itemList2(num){
				this.checkIndex2 = num;
				var that = this;
				switch(num){
					case 0: this.sontwo = 1405; break;
					case 1: this.sontwo = 1406; break;
					case 2: this.sontwo = 1407; break;
					case 3: this.sontwo = 1408; break;
					case 4: this.sontwo = 1409; break;
					case 5: this.sontwo = 1410; break;
				};
				this.$http.get("https://www.qpmall.com/getIndexClassificationByfir.htm?parentID="+this.sontwo).then(function(res){
					that.rglist = res.data.classifyBarList;
				});
			},
			itemList3(num){
				this.checkIndex3 = num;
				var that = this;
				switch(num){
					case 0: this.sonthree = 1463; break;
					case 1: this.sonthree = 1464; break;
					case 2: this.sonthree = 1465; break;
					case 3: this.sonthree = 1466; break;
					case 4: this.sonthree = 1467; break;
					case 5: this.sonthree = 1468; break;
					case 6: this.sonthree = 1469; break;
					case 7: this.sonthree = 1470; break;
				};
				this.$http.get("https://www.qpmall.com/getIndexClassificationByfir.htm?parentID="+this.sonthree).then(function(res){
					that.rglist = res.data.classifyBarList;
				});
			}
			
		},
		components:{
			CommonHead,
			NavBottom
		}
	}
</script>

<style>
</style>